<template>
    <div id="app">

        <div class="title">
            <div style="width:350px;display: flex;align-items: center;">
                <div style="width:90px;color:gray;">单价筛选</div>
                <t-range-input @change="changeInput" />
            </div>
            <div style="margin-left:10px;">
                <t-button variant="outline" theme="danger" ghost @click="paixu = 1">最高单价</t-button>
                <t-button variant="outline" theme="warning" @click="paixu = 2" ghost>最低单价</t-button>
            </div>
        </div>
        <t-loading :loading="loading" size="medium" show-overlay>

            <t-base-table row-key="id" :data="flterOrderData" :columns="columns" :max-height="'70vh'"
                :pagination="{ total: OrderData.length }">
                <template #price="{ col, row }">
                    <t-tag theme="danger" shape="round">￥{{ row.sumPrice }}</t-tag>
                </template>
            </t-base-table>
        </t-loading>

    </div>
</template>

<script setup>
import { getOrderData } from '@/http/modules/user'
import { ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core';
const OrderData = ref([]);
const paixu = ref(0);
const loading = ref(true)
const columns = [
    {
        width: '100',
        colKey: 'tackid',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'userid',
        title: '下单用户',
    },
    {
        colKey: 'status',
        title: '订单状态',
    },
    {
        colKey: 'sumPrice',
        title: '订单总价',
        cell: "price"
    },
    {
        colKey: 'sumCount',
        title: '订单商品总数',
    },
    {
        colKey: 'tackTime',
        title: '取餐时间',
    },
    {
        colKey: 'createTime',
        title: '下单时间',
    },
];
const flterOrderData = computed(() => {
    return OrderData.value.sort((a, b) => {
        if (paixu.value == 2) {
            return a.sumPrice - b.sumPrice;
        } else if (paixu.value == 1) {
            return b.sumPrice - a.sumPrice;
        }
    }).filter(n => {
        return n.sumPrice > min.value && n.sumPrice < max.value
    })
})

const max = ref(99999999);
const min = ref(0);

const changeInput = ([minV = 0, maxV = 999999], b, c) => {
    if (minV == '') minV = 0;
    if (maxV == '') maxV = 99999
    max.value = maxV;
    min.value = minV;
}

getOrderData().then(res => {
    OrderData.value = res;
    loading.value = false
})
</script>
 
<style lang="less" scoped>
.title {
    margin-bottom: 15px;
    display: flex;
}
</style>